<!--导航栏-->
<template>
  <div>
    <el-menu v-show="!isMobile"
             :default-active="activeIndex"
             :router="true"
             class="el-menu-demo"
             mode="horizontal"
             background-color="#f5f6f7"
             text-color="#1b1b1b"
             active-text-color="#409eff">
      <el-menu-item index="/">首页</el-menu-item>
      <el-menu-item index="/my-content">我的文章</el-menu-item>
      <el-menu-item index="/write" v-show="isLogin">写文章</el-menu-item>
      <el-menu-item index="/category" v-show="isLogin">分类管理</el-menu-item>
      <el-input v-model="searchContent" placeholder="搜索文章" size="small" style="width: 20%; margin-top: 13px;">
      </el-input>
      <el-button class="search_button" type="primary" icon="el-icon-search" size="small" @click="search">搜索</el-button>


      <el-menu-item index="4" v-show="isLogin" v-on:click="loginOut" style="float: right;">退出登录</el-menu-item>

      <!--      <el-menu-item v-show="!isLogin" index="/regist" style="float: right;">注册</el-menu-item>-->
      <el-menu-item v-show="!isLogin" index="/login" style="float: right;">登录</el-menu-item>

    </el-menu>


    <el-menu v-show="isMobile"
             :default-active="activeIndex"
             :router="true"
             class="el-menu-demo"
             mode="horizontal"
             background-color="#f5f6f7"
             text-color="#1b1b1b"
             active-text-color="#409eff">
      <el-submenu index="1-1">
        <template slot="title">菜单</template>
        <el-menu-item-group>
          <template slot="title"></template>
          <el-menu-item index="/">首页</el-menu-item>
          <el-menu-item index="/my-content">我的文章</el-menu-item>
          <el-menu-item index="/write" v-show="isLogin">写文章</el-menu-item>
          <el-menu-item index="/category" v-show="isLogin">分类管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-input v-model="searchContent" @keyup.enter.native="search" placeholder="搜索文章" size="small" style="width: 45%; margin-top: 13px;">
      </el-input>

      <el-menu-item index="4" v-show="isLogin" v-on:click="loginOut" style="float: right;">退出登录</el-menu-item>

      <!--      <el-menu-item v-show="!isLogin" index="/regist" style="float: right;">注册</el-menu-item>-->
      <el-menu-item v-show="!isLogin" index="/login" style="float: right;">登录</el-menu-item>
    </el-menu>

  </div>
</template>

<script>
import global from "./Common.vue"
const axios = require("axios")
export default {
  name: "Navigation",
  data() {
    return {
      activeIndex: '',
      activeIndex2: '1',
      isLogin: false,
      isMobile: false,
      searchContent: ""
    }
  },
  mounted() {
    this.isMobile = global.isMobile

    let activeIndex = this.$route.path;
    if (activeIndex) {
      this.activeIndex = activeIndex;
    }

    let item = sessionStorage.getItem("isLogin");
    console.info("item:", item)
    if (item === true || item === 'true') {
      this.isLogin = true
    } else {
      axios.get("/api/user/is_login")
        .then((res) => {
          this.isLogin = res.data.code === 200;
          sessionStorage.setItem("isLogin", true)
          console.log(this.isLogin)
        });
    }

  },
  methods: {
    search() {
      this.$emit("search", this.searchContent);
    },
    loginOut() {
      axios.post("/api/user/login_out")
        .then((res) => {
          this.isLogin = res.data.code !== 200;
          sessionStorage.setItem("isLogin", false);
          console.log('this.$route.path=', this.$route.path)
          if (this.$route.path !== '/') {
            this.$router.push({
              path: "/",
              query: {
                activeIndex: '1'
              }
            });
          } else {
            this.$router.go(0);
          }
        })
    },
    handleSelect(key, keyPath) {
      console.log('key=' + key, 'keyPath=' + keyPath);
    }

  }
}
</script>

<style scoped>
.search_button {
  margin-left: -4px;
}
</style>
